<template>
    <div class="breadcrumb c3 fs20">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>
                {{ $route.meta.breadcrumb[0].text }}
            </el-breadcrumb-item>
            <div v-if="$route.meta.breadcrumb.length > 1">
                <el-breadcrumb-item :to="'/' + $route.meta.breadcrumg[index + 1].id" v-for="(item, index) in $route.meta.breadcrumb.filter(
                    (item, index) => index !== 0
                )" :key="item.id" :class="{ active: $route.meta.breadcrumb[index + 1].id === $route.path.substr(1) }">
                    {{ item.text }}
                </el-breadcrumb-item>
            </div>
        </el-breadcrumb>
    </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
    .breadcrumb {
        height: 40px;
        padding-left: 24px;
        .el-breadcrumb {
            font-family: "PingFang HK";
            height: 100%;
            line-height: 40px;
        }
        
    }
</style>
